<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关联OTA门票产品配置</title>
    <script src="__PUBLIC__/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
</head>
<style>
    .site-content{
        padding: 20px 0 10px 20px;
    }
    .table_input{
        width: 80px;
        display: inline-block;
        margin: 0 10px;
    }

    .must_input_star{
        font-size: 16px !important;
        color:red;
        margin-right: 2px;
    }
    .uploadimgbox{
        margin: 4px 10px;
    }
    .uploadimgbox img{
        height: 60px;
        padding: 4px;
    }

    .list-group-item{
        margin: 5px 30px 5px 0;
        color: #212529;
        display: inline-block;
    }
    .list-group-item>i,.uploadimgbox>i{
        color:red;
    }
    .example2 .list-group-item{
        background: #d2d2d2;
        padding: 2px 10px;
    }
    .bcStartDate,.startComboDate,.endComboDate{
        width: 40%;
    }

    /*时间选择框隐藏秒数*/
    .laydate-time-list>li{
        width: 50% !important;
    }
    .laydate-time-list li:last-child{
        display: none;
    }
</style>
<body>
<div class="site-inline">
    <div class="site-content">
        <form class="layui-form " id="otaTicketConfigForm" method="POST">
            <input name="product_id" id="product_id" type="hidden" value="{$ota_config.product_id}">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>OTA关联门票信息</legend>
            </fieldset>
            <div class="layui-form-item ">
                <div class="layui-inline">
                    <label class="layui-form-label">库存类型</label>
                    <div class="layui-input-block">
                        <input type="radio" name="inventory_type" lay-filter="inventory_type" value="1" title="日历库存" {notempty name="$ota_config.inventory_type"}{if $ota_config.inventory_type==1}checked{/if}{/notempty}>
                        <input type="radio" name="inventory_type" lay-filter="inventory_type" value="2" title="非日历库存" {notempty name="$ota_config.inventory_type"}{if $ota_config.inventory_type==2}checked{/if}{/notempty}>
                        <span class="layui-inline" style="padding-top: 10px;color:#c9c9c9;">提示：选择预约商品，预约商品开始时间和可选出发开始结束时间则必填</span>
                        <!--<span class="layui-inline showSaleType" style="padding-top: 10px;"><i class="layui-icon">&#xe60b;</i></span>-->
                    </div>
                </div>
            </div>

            <div class="layui-form-item ">
                <div class="layui-inline">
                    <label class="layui-form-label">需要买家指定入园日期</label>
                    <div class="layui-input-block">
                        <input type="radio" name="need_enter_date" lay-filter="need_enter_date" value="1" title="需要" {notempty name="$ota_config.need_enter_date"}{if $ota_config.need_enter_date==1}checked{/if}{/notempty}>
                        <input type="radio" name="need_enter_date" lay-filter="need_enter_date" value="2" title="不需要" {notempty name="$ota_config.need_enter_date"}{if $ota_config.need_enter_date==2}checked{/if}{/notempty}>
                        <span class="layui-inline" style="padding-top: 10px;color:#c9c9c9;">提示：门票商品非日历库存时必填，指定该收费项目在购买时是否需要买家指定入园日期。</span>
                    </div>
                </div>
            </div>

            <div class="layui-form-item bcStartDate">
                <label class="layui-form-label">天数有效期</label>
                <div class="layui-input-block">
                    <input type="number" class="layui-input layui-input-inline expire_In" value="{notempty name='$ota_config.expire_In'}{$ota_config.expire_In}{/notempty}" name="expire_In">
                    <span class="layui-inline" style="padding-top: 10px;color:#c9c9c9;">提示：指定入园日期后 多少天内有效。</span>
                </div>
            </div>

            <div class="layui-form-item bcStartDate">
                <label class="layui-form-label">日期有效期</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input layui-input-inline expire_date" value="{notempty name='$ota_config.expire_date'}{$ota_config.expire_date}{/notempty}" name="expire_date">
                    <span class="layui-inline" style="padding-top: 10px;color:#c9c9c9;">提示：表示到某日期前有效。</span>
                </div>
            </div>

            <div class="layui-form-item bcStartDate">
                <label class="layui-form-label">预定时间<br>是否限制</label>
                <div class="layui-input-block">

                    <input type="radio" name="reserve_limit_type" lay-filter="reserve_limit_type" value="1" title="无限制" {notempty name="$ota_config.reserve_limit_type"}{if $ota_config.reserve_limit_type==1}checked{/if}{/notempty}>
                    <input type="radio" name="reserve_limit_type" lay-filter="reserve_limit_type" value="2" title="有限制" {notempty name="$ota_config.reserve_limit_type"}{if $ota_config.reserve_limit_type==2}checked{/if}{/notempty}>

                    <span class="layui-inline" style="padding-top: 10px;color:#c9c9c9;">提示：无限制 购买后可立即入园；有限制，此时时间限制规则必填</span>

                </div>
            </div>

            <div class="layui-form-item reserve_limit_rule" style="background:#eee;padding-top:10px;display: none;">
                <div class="layui-input-block">
                    <!--<div class="layui-inline">预定时间限制规则</div>-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">时间限制</label>
                        <input type="number" name="reserve_limit_day" class="layui-input layui-input-inline" value="{if isset($ota_config.reserve_limit_day)}{$ota_config.reserve_limit_day}{/if}">
                        <input name="reserve_limit_per_time" type="text" class="layui-input layui-input-inline per_time" value="{if isset($ota_config.reserve_limit_per_time)}{$ota_config.reserve_limit_per_time}{/if}">
                        <span class="layui-inline" style="padding-top: 10px;color:#c9c9c9;">提示：必须提前x天拍下，且在xx点xx分前支付成功，订单才生效。当提前0天时，即为当日票。</span>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">当日票限制</label>
                        <input name="reserve_limit_enter_time" type="text" class="layui-input layui-input-inline enter_time" value="{if isset($ota_config.reserve_limit_enter_time)}{$ota_config.reserve_limit_enter_time}{/if}">
                        <span class="layui-inline" style="padding-top: 10px;color:#c9c9c9;">提示：当提前0天时，即为当日票时生效，当日票需要在出票后xx小时xx分钟后方可入园。</span>
                    </div>
                </div>
            </div>

            <div class="layui-form-item ">
                <label class="layui-form-label">发码方式</label>
                <div class="layui-input-block">
                    <input type="radio" name="code_mode" lay-filter="code_mode" value="1" title="电子票自动发码 需设置电子凭证信息" {if !empty($ota_config.code_mode) && $ota_config.code_mode==1}checked{/if}>
                    <input type="radio" name="code_mode" lay-filter="code_mode" value="2" title="电子票手工发码" {if !empty($ota_config.code_mode) && $ota_config.code_mode==2}checked{/if}>
                    <input type="radio" name="code_mode" lay-filter="code_mode" value="3" title="实体票" {if !empty($ota_config.code_mode) && $ota_config.code_mode==3}checked{/if}>

                    <span class="layui-inline" style="padding-top: 10px;color:#c9c9c9;">选择电子票自动、手工发码 需要配置电子凭证信息。</span>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">是否需要<br>买家邮箱</label>
                <div class="layui-input-block">
                    <input type="radio" name="has_email" lay-filter="has_email" value="1" title="需要" {notempty name="$ota_config.has_email"}{if $ota_config.has_email==1}checked{/if}{/notempty}>
                    <input type="radio" name="has_email" lay-filter="has_email" value="0" title="不需要" {empty name="$ota_config.has_email"}checked{/notempty}>
                    <span class="layui-inline" style="padding-top: 10px;color:#c9c9c9;">手工发码 是否需要买家邮箱，选择电子票手工发码时选填，不填则默认不需要邮箱信息。</span>
                </div>
            </div>

            <!--电子票信息-->
            <div class="elc_info" style="display: none;">
                <div class="layui-form-item">
                    <label class="layui-form-label">电子凭证<br>过期类型</label>
                    <div class="layui-input-block">
                        <input type="radio" name="expiry_date_type" value="1" title="固定日期至固定日期" {if !empty($ota_config.expiry_date_type) && $ota_config.expiry_date_type==1}checked{/if}>
                        <input type="radio" name="expiry_date_type" value="2" title="购买成功日至固定日期" {if !empty($ota_config.expiry_date_type) && $ota_config.expiry_date_type==2}checked{/if}>
                        <input type="radio" name="expiry_date_type" value="3" title="购买成功N天内有效" {if !empty($ota_config.expiry_date_type) && $ota_config.expiry_date_type==3}checked{/if}>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">电子凭证<br>开始时间</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input layui-input-inline expiry_date_start" value="{notempty name='$ota_config.expiry_date_start'}{$ota_config.expiry_date_start}{/notempty}" name="expiry_date_start">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">电子凭证<br>结束时间</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input layui-input-inline expiry_date_end" value="{notempty name='$ota_config.expiry_date_end'}{$ota_config.expiry_date_end}{/notempty}" name="expiry_date_end">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">电子凭证<br>有效天数</label>
                    <div class="layui-input-block">
                        <input type="number" class="layui-input layui-input-inline expiry_days" value="{notempty name='$ota_config.expiry_days'}{$ota_config.expiry_days}{/notempty}" name="expiry_days"><span class="layui-input-inline" style="line-height: 36px;">天</span>
                    </div>
                </div>
            </div>

            <div class="">
                <div class="layui-form-item">
                    <label class="layui-form-label">核销<br>门店库ID</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input layui-input-inline package_id" value="{notempty name='$ota_config.package_id'}{$ota_config.package_id}{/notempty}" name="package_id">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">售中自动<br>退款比例</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input layui-input-inline auto_refund_rate"  lay-verify="checkPercentNumber" value="{notempty name='$ota_config.auto_refund_rate'}{$ota_config.auto_refund_rate}{/notempty}" placeholder="请输入1-100的数字" min="0" max="100" maxlength="3" name="auto_refund_rate"><span class="layui-input-inline" style="line-height: 36px;">%</span>
                        <span class="layui-inline" style="padding-top: 10px;color:#c9c9c9;">提示：可选，售中自动退款比例，0~100。默认为0，即不支持售中自动退款；当值为1~100时表示售中自动退款的比例。</span>

                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">过期自动<br>退款比例</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input layui-input-inline expired_refund_rate" lay-verify="checkPercentNumber" value="{notempty name='$ota_config.expired_refund_rate'}{$ota_config.expired_refund_rate}{/notempty}" placeholder="请输入1-100的数字" min="0" max="100" maxlength="3" name="expired_refund_rate"><span class="layui-input-inline" style="line-height: 36px;">%</span>
                        <span class="layui-inline" style="padding-top: 10px;color:#c9c9c9;">提示：可选，过期自动退款比例，0~100。默认为0，即不支持过期自动退款比例；当值为1~100时表示过期自动退款的比例。</span>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">店铺<br>联系方式</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input layui-input-inline shop_tel" value="{notempty name='$ota_config.shop_tel'}{$ota_config.shop_tel}{/notempty}" name="shop_tel">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">核销<br>服务提供商</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input layui-input-inline merchant_name" value="{notempty name='$ota_config.merchant_name'}{$ota_config.merchant_name}{/notempty}" name="merchant_name">
                    </div>
                </div>
            </div>
            <div class="layui-form-item ">
                <div class="layui-inline">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <button lay-submit="" class="layui-btn layui-btn-bg layui-btn-normal submitForm">提交</button>
                    </div>
                </div>
            </div>
        </form>

    </div>
</div>
</body>

<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    layui.config({
        base : '__PUBLIC__/'
    }).extend({
        selectM: './multiple/selectM'
    }).use(['layer','form','jquery','selectM','upload','laydate'],function(){
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form,
            laydate = layui.laydate;
        laydate.render({     //创建时间选择框
            elem: '.expire_date' //指定元素
            ,format: 'yyyy-MM-dd'
            ,trigger:'click'

        });
        laydate.render({     //创建时间选择框
            elem: '.expiry_date_start' //指定元素
            ,format: 'yyyy-MM-dd'
            ,trigger:'click'
        });
        laydate.render({     //创建时间选择框
            elem: '.expiry_date_end' //指定元素
            ,format: 'yyyy-MM-dd'
            ,trigger:'click'
        });
        laydate.render({     //创建时间选择框
            elem: '.per_time' //指定元素
            ,format: 'HH:mm'
            ,trigger:'click'
            ,type: 'time'
        });
        laydate.render({     //创建时间选择框
            elem: '.enter_time' //指定元素
            ,format: 'HH:mm'
            ,trigger:'click'
            ,type: 'time'
        });
        //表单属性预设
        form.verify({
            checkPercentNumber:function (value,item) {
                if(value >100 || value <0){
                    layer.msg('请输入1-100的数字！');
                    return false;
                }
            }
        })
        /**
         * 自动将form表单封装成json对象
         */
        $.fn.serializeObject = function() {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function() {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [ o[this.name] ];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };

        //获取表单的所有数据
        function getFormData()
        {
            var formData = $("#otaTicketConfigForm").serializeObject();
            return formData;
        }
        //提交表单
        form.on('submit',function () {
            var formData = getFormData();
            console.log(formData);
            var loading = layer.load(2);
            $.post('{:url("admin/product/update_ota_ticket_config")}',formData,function (res) {
                layer.close(loading);
                layer.msg(res.msg);
                if(res.code > 0){
                    setTimeout(function () {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index)
                    },1000)
                }
            },'json')
            return false;

        })

        form.on('radio(reserve_limit_type)',function (data) {
            data.value < 2 ?
                $('.reserve_limit_rule').hide() :
                $('.reserve_limit_rule').show();
        })

        form.on('radio(code_mode)',function (data) {
            data.value == 3 ?
                $('.elc_info').hide() :
                $('.elc_info').show();
        })

        {if !empty($ota_config.reserve_limit_type) && $ota_config.reserve_limit_type > 1}
        $('.reserve_limit_rule').show();
        {/if}
        {if !empty($ota_config.code_mode) && in_array($ota_config.code_mode,[1,2])}
        $(".elc_info").show();
        {/if}
    });
</script>
</html>